import { Graph, Shape } from '@antv/x6'
const { Rect } = Shape

class ModelRect extends Rect {}
ModelRect.config({
  inherit: 'rect',
  width: 160,
  height: 30,
  attrs: {
    body: {
      fill: '#ffffff',
      stroke: '#108ee9',
      strokeWidth: 1,
      rx: 15,
      ry: 15,
    },
  },
  ports: {
    groups: {
      in: {
        position: 'top',
        label: {
          position: 'top',
        },
        attrs: {
          circle: {
            r: 5,
            magnet: true,
            // stroke: '#31d0c6',
            // fill: '#fff',
            strokeWidth: 1,
          },
        },
      },
      out: {
        position: 'bottom',
        label: {
          position: 'bottom',
        },
        attrs: {
          circle: {
            r: 5,
            magnet: true,
            // stroke: '#31d0c6',
            // fill: '#fff',
            strokeWidth: 1,
          },
        },
      },
    },
  },
})

function initRegisterNodes() {
  Graph.registerNode('model-rect', ModelRect)
}

/**
 * 隐藏和打开 ports
 * @param {Boolean} visible 是否可见
 */
function changePortsVisibility(graph, visible) {
  const ports = document.querySelectorAll('.x6-port-body')
  const texts = document.querySelectorAll('.x6-port-label')
  ports.forEach((port) => {
    port.style.visibility = visible ? 'visible' : 'hidden'
  })
  texts.forEach((text) => {
    text.style.visibility = visible ? 'visible' : 'hidden'
  })
}

export { initRegisterNodes, ModelRect, changePortsVisibility }
